import React from 'react';
import ReactDom from 'react-dom';

//render props的写法
class MouseTracker extends React.Component {
    state = {
        x: 0,
        y: 0
    }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        })
    };


    render() {
        console.log(this.props);
        return (
            <div onMouseMove={this.handleMouseMove}>

                {this.props.render(this.state)}

            </div>
        );
    }


}

//高阶函数的写法：

function WithMouseTracker(OldComponent) {
    return props => (
        <MouseTracker render={props => (<OldComponent   {...props}/>)}/>
    )

}

//任意一个类似App的组件，都可以传给高阶组件函数，返回一个新的组件MouseTracker
let App = props => (
    <React.Fragment>
        <p>move your tracker</p>
        <p>当前鼠标的位置： x={props.x} y={props.y}</p>
    </React.Fragment>
);

//这个空标签就是<React.Fragment>


let WithMouseTrackerApp = WithMouseTracker(App);

/*
* 把this.props.children（默认是children）实现成一个函数，在该类组件中可以调用调用children函数，从而渲染该函数返回的虚拟DOM
*
*
* <MouseTracker render={
        props => (
            <>
                <p>move your tracker</p>
                <p>当前鼠标的位置： x={props.x} y={props.y}</p>
            </>
        )
    }>
    </MouseTracker>
* */
ReactDom.render(<div><WithMouseTrackerApp/></div>, document.getElementById('root'));


/*
* 高阶组件HOC和render方法根本区别：
* 1.高阶组件 return的是一个组件， <LoadFromAjaxUserName value={this.state.value}/>
* 2.render方法传递的是一个函数：   {this.props.render(this.state)}
* 3，高阶组件是把一个组件给了一个函数，一般会产生一个新组件
* 4.render 是把一个函数（app返回的是一个函数嘛）给了组件MouseTracker，一般不会产生新组件
* */
